設計大綱

一個平台要成功，當然少不了圖片/照片的介紹（很愛看圖的懶人XD），所以接下來要設計一個區塊 —— 專門輪播「使用平台的過程照片」。
Bootstrap 5 本身是有carousel這個元件可以提供切版使用的，所以這邊就會參考它的設計唷！
（下方附上Bootstrap 5 的carousel）

但由於它的設計不一定符合每個人的口味（對，就是不太符合我的口味-v-），所以這邊會幫它做點小變化。這次會讓carousel不是滿版，但因為怕太單調，所以在背後加一條長方形作為小裝飾！

步驟

背景條

1. 在畫布上畫出一條「滿版寬」的長方形，高度先隨便拉個480px（之後再微調）
2. 顏色調整為Primary（#9B3C05）＋透明度16%

carousel的圖片

1. 把carousel所需的圖片，直接拉進來
2. 大小拉到與container同寬
3. 高度這邊就不特別去改了，因為目前的圖片都是一樣 14:9 的比例，到時候切版直接下w-100就可以了
4. 與底下的背景條是維持垂直置中
5. 再與上方區塊維持96px

再度微調背景條高度

1. 背景條與上方的間距是170px，但因為非8的倍數，所以把背景條的高度調整為468px
2. 這時候背景條與上方區塊間距為176px、與carousel圖片的間距為80px
3. 以上為完美的數字 ~v~

carousel的字幕

1. 在照片正中央輸入字幕標題文案
2. 調整文字大小為56px (display-4的大小)、font-weight為Bold、顏色為secondary-color(#FDFCFC)
   
3. 在標題下一行輸入小標題文案
4. 調整文字大小為32px (h2的大小)、font-weight為normal、顏色為secondary-color(#FDFCFC)
   
5. 因為不想跟Bootstrap一樣在圖片的下方，所以這邊會把標題和小標群組起來，再來放在水平及垂直的置中位置

carousel的btn

1. 這邊因為不會跟Bootstrap一樣有左右的按鈕，所以就不會畫出來喔
2. 另外，原本Bootstrap下方的三條按鈕，這邊會改成以「三個圓點」來呈現
3. 在下方畫出一個圓形，並調整大小為16px、顏色為white(#FFFFFF)
   
4. 再另外複製兩個出來
5. 把排第一的圓點顏色調整為text(#707070)
   
6. 調整彼此間距為24px，margin-bottom為40px，這樣就完成了！
   

結論

這個區塊是不是其實不難～～～ 把原本預設的carousel改成自己想要的樣子，再把數值改成完美的8倍數，就可以完成了！雖然目前看起來改設計好像蠻簡單，但這邊還是要提醒一下大家，在切版時，畢竟有改到預設值的元件，所以到時候切版就會比較複雜了（詳情見後面切版實作）。不過，我覺得是值得的哈哈哈哈，因為這樣才會有獨一無二的設計?！！！
那明天再來設計下一個區塊吧！